<template>
    <div id='' class='system_set_form'>
        <i-form ref="iForm" v-if="isShow" :config="psdShow?addconfig:editconfig">
            <template #roleIds="{row}">
                <Select v-model="roleIds" multiple>
                    <Option v-for="item in jspzList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </template>
            <template #headerDocId="{row}">
                <div v-if="file.length !== 0" class="imgShow">
                    <img :src="showImgPath" alt="" srcset="" style="width:200px;height:200px;">
                    <Icon type="ios-close-circle" class="icon_close" size="24" color="#ff9900" @click="removeheaderDocIdImg" />
                </div>
                <Upload v-else :show-upload-list="false" multiple type="drag" action="" :accept="Accept" :format="Format" :before-upload="headerbeforeUpload">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>上传用户头像图片</p>
                    </div>
                </Upload>
            </template>
            <template #signDocId="{row}">
                <div v-if="signfile.length !== 0" class="imgShow">
                    <img :src="signshowImgPath" alt="" srcset="" style="width:200px;height:200px;">
                    <Icon type="ios-close-circle" class="icon_close" size="24" color="#ff9900" @click="removesignDocIdImg" />
                </div>
                <Upload v-else :show-upload-list="false" multiple type="drag" action="" :accept="Accept" :format="Format" :before-upload="signbeforeUpload">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>上传用户签名图片</p>
                    </div>
                </Upload>
                <p style="color: rgb(188, 32, 32);">建议：上传图片尺寸为 120 * 60px</p>
            </template>
        </i-form>
    </div>
</template>
<script>
import { addconfig, editconfig } from './form_config'
export default {
    name: '',
    props: [''],
    data() {
        this.addnewConfig = icu.util.deepClone(addconfig)
        this.editnewConfig = icu.util.deepClone(editconfig)
        return {
            isShow: false,
            psdShow: true,
            addconfig: this.addnewConfig,
            editconfig: this.editnewConfig,
            id: '',
            roleIds: [],
            ssbmList: [],
            jspzList: [],
            file: [],//头像
            showImgPath: '',
            signfile: [],//签名图片,
            signshowImgPath: '',
            Accept: ".png,.jpg,.jpeg,",
            Format: ['.png', '.jpg', '.jpeg']
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        this['$api'] = this.$Api.get(['systemSetup:systemManger']);
        this.$fileApi = this.$Api.get(['common:upload'])
        this.getSelect()
    },
    methods: {
        setPsdShow(flag) {
            this.psdShow = flag;
            this.isShow = true;
        },
        getForm() {
            const validatePassCheck = (rule, value, callback) => {
                if (value !== this.$refs.iForm.bindData.password) {
                    callback(new Error('确认密码与密码输入不一致'));
                } else {
                    callback();
                }
            };
            this.addconfig.rules.qrmm = [{ validator: validatePassCheck, trigger: 'blur' }]
            let formData = null;
            let validateName = this.psdShow ? 'userAdd' : 'userUpdata'
            this.$refs.iForm.submit(validateName, (res) => {
                let returnObj = {
                    username: res.username ? res.username : '',
                    email: res.email ? res.email : '',
                    cardnumber: res.cardnumber ? res.cardnumber : '',
                    cutstation: res.cutstation,
                    mobile: res.mobile ? res.mobile : '',
                    password: res.password ? res.password : '',
                    realName: res.realName ? res.realName : '',
                    status: res.status,
                    id: this.id,
                    deptId: res.deptId ? res.deptId : '',
                    roleIds: this.roleIds ? this.roleIds : [],
                    headerDocId: this.file && this.file.length > 0 ? this.file[0].id : '',
                    signDocId: this.signfile && this.signfile.length > 0 ? this.signfile[0].id : '',
                }
                formData = returnObj
            })
            return formData
        },
        setData(row) {
            this.psdShow = false
            this.id = row.id
            this.$http.$get('InfopermissionUserManage', { params: { id: row.id } }).then(res => {
                if (res.code == 200) {
                    delete res.data.password
                    this.$refs.iForm.setData(res.data)
                    this.roleIds = res.data.roleIds
                    if (res.data.headerDoc) {
                        this.file.push({ id: res.data.headerDocId })
                        this.showImgPath = window.config.fileServer + 'show/' + `${res.data.headerDoc.minioPath}`
                    }
                    if (res.data.signDoc) {
                        this.signfile.push({ id: res.data.signDocId })
                        this.signshowImgPath = window.config.fileServer + 'show/' + `${res.data.signDoc.minioPath}`
                    }
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        headerbeforeUpload(response) {
            // response.size 单位是 b 字节
            if (response.size > 500 * 1024) {
                this.$Message.warning('文件  ' + response.name + ' 太大，上传文件大小不能超过500kb.');
                return
            }
            this.$fileApi.fileUpload(response, (res) => {
                if (res.code == 200) {
                    this.showImgPath = window.config.fileServer + 'show/' + `${res.data[0].minioPath}`
                    this.file = res.data;
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        removeheaderDocIdImg() {
            this.file = []
            this.showImgPath = ''
        },
        signbeforeUpload(response) {
            // response.size 单位是 b 字节
            if (response.size > 500 * 1024) {
                this.$Message.warning('文件  ' + response.name + ' 太大，上传文件大小不能超过500kb.');
                return
            }
            this.$fileApi.fileUpload(response, (res) => {
                if (res.code == 200) {
                    this.signshowImgPath = window.config.fileServer + 'show/' + `${res.data[0].minioPath}`
                    this.signfile = res.data;
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        removesignDocIdImg() {
            this.signfile = []
            this.signshowImgPath = ''
        },
        getSelect() {
            this.$http.$get('deptTopTree', { query: {} }).then(res => {
                if (this.psdShow) {
                    this.changeData('addconfig', res)
                } else {
                    this.changeData('editconfig', res)
                }
            })
            this.$api.roleList({ tenant: 0 }, data => {
                this.jspzList = data;
            })
        },
        changeData(type, res) {
            for (let i = 0; i < this[type].form.length; i++) {
                const element = this[type].form[i];
                if (element.key == 'deptId') {
                    element.data = this.setTreeData(res.data[0].children)
                }
            }
        },
        setTreeData(data) {
            for (let item of data) {
                item.label = item.title;
                if (item.children) {
                    this.setTreeData(item.children);
                }
            }
            return data;
        },
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.imgShow {
    position: relative;
    width: 200px;
    height: 200px;
}
.imgShow .icon_close {
    position: absolute;
    right: 0px;
    top: 0px;
}
</style>
